<template>
  <div style="width: 33.333%">
    <div class="container">数据分析</div>
    <div>
      <div id="charts_5" style="height: 400px; width: 100%"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, nextTick, onMounted } from 'vue'
let myChart = ref(<any>{})
onMounted(() => {
  const chartDom = document.getElementById('charts_5')
  myChart = echarts.init(chartDom)
})
const option = {
  legend: {
    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
  },
  series: [
    {
      name: 'Funnel',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside',
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid',
        },
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
        },
      },
      data: [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' },
      ],
    },
  ],
}
nextTick(() => {
  option && myChart.setOption(option)
})
</script>

<style lang="scss" scoped></style>
